<template>
  <el-card class="common-page-box">
    <el-row type="flex" class="main-scerne" :gutter="8">
      <!-- 左边字典 -->
      <el-col :span="12">
        <div style="margin-bottom: 10px">
          <el-button type="primary" size="small" @click="dialogVisible = true">新增</el-button>
          <el-button type="primary" size="small" @click="deleteAll">批量删除</el-button>
          <el-button type="primary" size="small">修改</el-button>
        </div>

        <el-form inline-message :show-message="false" :model="searchForm" label-width="80px" class="demo-ruleForm">
          <el-row type="flex" :gutter="8">
            <el-col :span="7">
              <el-form-item label="字典名称:" prop="name">
                <el-input v-model="searchForm.name" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="字典编码:" prop="name">
                <el-input v-model="searchForm.type" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="描述:" prop="name">
                <el-input v-model="searchForm.desc" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0" prop="name">
                <el-button type="primary" size="small" @click="searchDict">搜素</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="se-bd">
          <el-table :data="tableData" stripe border @row-click="rowClick" @selection-change="selectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" align="center" label="序号" width="50px" />
            <el-table-column prop="name" label="字典名称" width="120" align="center" />
            <el-table-column prop="type" label="字典编码" width="120" align="center" />
            <el-table-column prop="status" label="状态" header-align="center">
              <!-- <template slot="scope">
                {{ scope.row.status }}
              </template> -->
            </el-table-column>
            <el-table-column prop="desc" label="描述" width="220" header-align="center" />
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteOne(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper"
            :total="page.total" :current-page="page.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="page.pageSize"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-col>
      <el-dialog title="字典" :visible.sync="dialogVisible" width="30%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="字典名称:" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="字典编码:" prop="type">
            <el-input v-model="form.type" />
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-input v-model="form.status" />
          </el-form-item>
          <el-form-item label="描述:" prop="desc">
            <el-input v-model="form.desc" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrUpdateDict">确 1定</el-button>
        </span>
      </el-dialog>
      <!-- 右边字典 -->
      <el-col :span="12">
        <div v-if="formTwo.sysDictionaryUuid != ''">
          <div style="margin-bottom: 10px; margin-top: 45px">
            <el-button type="primary" size="small" @click="dialogVisibleTwo = true">新增</el-button>
            <el-button type="primary" size="small">批量删除</el-button>
            <el-button type="primary" size="small">修改</el-button>
          </div>
          <div class="se-bd" style="margin-top: 30px">
            <el-table :data="tableDataTwo" stripe border @selection-change="selectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column type="index" align="center" label="序号" width="50px" />
              <el-table-column prop="value" label="值" width="120" align="center" />
              <el-table-column prop="label" label="名称" align="center" />
              <el-table-column prop="status" label="状态" width="120" align="center" />
              <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleteOne(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper"
              :total="pageTwo.total" :current-page="pageTwo.page" :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="pageTwo.pageSize" @size-change="handleSizeChangeTwo" @current-change="handleCurrentChangeTwo" />
          </div>
        </div>
        <el-dialog title="字典" :visible.sync="dialogVisibleTwo" width="30%">
          <el-form :model="formTwo" label-width="80px">
            <el-form-item label="值:" prop="name">
              <el-input v-model="formTwo.value" />
            </el-form-item>
            <el-form-item label="名称:" prop="type">
              <el-input v-model="formTwo.label" />
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <el-input v-model="formTwo.status" />
            </el-form-item>
            <el-form-item label="排序:" prop="desc">
              <el-input v-model="formTwo.sort" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleTwo = false">取 消</el-button>
            <el-button type="primary" @click="addDictDetail">确定</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      searchForm: {
        name: '',
        type: '',
        desc: ''
      },
      tableData: [],
      tableDataTwo: [],
      page: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      pageTwo: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      // 勾选的表格数据
      select: [],
      form: {
        name: '',
        type: '',
        status: true,
        desc: ''
      },
      formTwo: {
        value: '',
        label: '',
        status: true,
        sort: '',
        sysDictionaryUuid: ''
      },
      dialogVisible: false,
      dialogVisibleTwo: false
    }
  },
  mounted() {
    this.getDictionaryList()
  },
  methods: {
    // 字典查询
    searchDict() {
      this.getDictionaryList()
    },
    // 获取字典列表
    getDictionaryList() {
      const params = {
        ...this.page,
        ...this.searchForm
      }
      this.API.dict.getDictionaryList(params).then((res) => {
        this.tableData = res.data.list
        this.page.total = res.data.total
      })
    },
    // 页数变化
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getDictionaryList()
    },
    // 当前页数变化
    handleCurrentChange(currentPage) {
      this.page.page = currentPage
      this.getDictionaryList()
    },
    // 勾选项目变化
    selectionChange(val) {
      this.select = val
    },
    // 点击每列表格
    rowClick(row) {
      this.formTwo.sysDictionaryUuid = row.uuid
      this.getDetailList(row.uuid)
    },
    // 删除字典
    deleteOne(row) {
      const ids = []
      ids.push(row.uuid)
      const params = {
        ids: ids
      }
      this.$confirm('确认删除？')
        .then(() => {
          this.API.dict.deleteDictionary(params).then((res) => {
            if (res && res.code === 200) {
              this.getDictionaryList()
              this.$message.success('删除成功')
              return
            }
          })
        })
        .catch(() => {
          // this.$message.warning('删除失败')
        })
    },

    // 批量删除
    deleteAll() {
      if (this.select && this.select.length > 0) {
        const ids = []
        this.select.forEach((item) => {
          ids.push(item.uuid)
        })
        const params = {
          ids: ids
        }
        this.$confirm('确认删除？')
          .then(() => {
            this.API.dict.deleteDictionary(params).then((res) => {
              if (res && res.code === 200) {
                this.getDictionaryList()
                this.$message.success('删除成功')
                return
              }
            })
          })
          .catch(() => {
            // this.$message.warning('删除失败')
          })
      } else {
        this.$message.warning('请选择一条数据')
      }
    },

    // 新增或修改字典
    addOrUpdateDict() {
      this.API.dict.addDictionary(this.form).then((res) => {
        console.log(res)
        if (res && res.code === 200) {
          this.getDictionaryList()
          this.dialogVisible = false
          this.$message.success('保存成功')
          return
        }
        this.$message.warning(res.message)
      })
    },
    // 查询字典详情
    getDetailList(id) {
      const params = {
        uuid: id,
        ...this.pageTwo
      }
      this.API.dict.getSysDictionaryDetailList(params).then((res) => {
        this.tableDataTwo = res.data.list
        this.pageTwo.total = res.data.total
      })
    },
    // 页数变化
    handleSizeChangeTwo(val) {
      this.pageTwo.pageSize = val
      this.getDetailList()
    },
    // 当前页数变化
    handleCurrentChangeTwo(currentPage) {
      this.pageTwo.page = currentPage
      this.getDetailList()
    },
    // 新增或修改字典
    addDictDetail() {
      this.API.dict.createDictionaryDetail(this.formTwo).then((res) => {
        if (res && res.code === 200) {
          this.getDictionaryList()
          this.dialogVisible = false
          this.$message.success('保存成功')
          return
        }
        this.$message.warning(res.message)
      })
    }
  }
}
</script>
<style scoped>
.main-scerne {
  /* width: 95%;
  height: 100%;
  margin-left: 2.5%;
  margin-top: 2.5%;
  box-shadow: 5px 10px 10px 5px #888888;
  border-radius: 10px;
  padding: 20px; */
}

.pagination {
  margin: 10px 0;
}
</style>
